<template>
  <div class="pageBox">
    <head-component title="视频详情"></head-component>
    <div v-for="(item, index) in conList" :key="index">
      <div class="imgBox" v-if="item.type == 1">
        <img :src="item.url" alt="" />
      </div>
      <div class="con" v-html="item.content" v-if="item.type == 2"></div>
      <div class="audioBox" v-if="item.type == 3">
        <audio :src="item.url" controls></audio>
      </div>
      <div class="videoBox" v-if="item.type == 4">
        <video :src="item.url" controls></video>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const id = ref(router.currentRoute.value.query.id);
    const conList = ref([]);

    function getDetails() {
      post("/portal", {
        module: "Business",
        interface: "1001",
        data: {
          id: id.value,
        },
      }).then((res) => {
        console.log(res);
        conList.value = res.data.content;
      });
    }
    getDetails();

    return {
      id,
      conList,
      getDetails,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding: 88px 30px 30px;
  .imgBox {
    width: 100%;
    img {
      max-width: 100%;
    }
  }
  .con {
    padding: 30px;
    font-size: 26px;
    font-weight: 400;
    color: #666666;
    :deep(img) {
      max-width: 100%;
    }
  }
  .audioBox {
    height: 440px;
    audio {
      width: 100%;
      height: 440px;
    }
  }
  .videoBox {
    height: 440px;
    video {
      width: 100%;
      height: 440px;
    }
  }
}
</style>